<template>
    <div class="personMiddle">
        <div class="left" @click="btn">
            <router-link to="/personal">bbb</router-link>
            <el-container class="layout-container-demo" style="height: 600px">
                <el-aside width="200px">
                    <el-scrollbar>
                        <el-menu :default-openeds="['1', '4']">
                            <el-sub-menu index="1">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon>我是买家
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1">
                                        <el-icon>
                                            <ShoppingTrolley />
                                        </el-icon>
                                        <router-link to="/car">我的购物车</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="1-2">
                                        <el-icon>
                                            <DocumentRemove />
                                        </el-icon>
                                        <router-link to="/order">我的订单</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="1-3">
                                        <el-icon>
                                            <Present />
                                        </el-icon>
                                        <router-link to="/personal/collections">我收藏的商品</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="1-4">
                                        <el-icon>
                                            <Histogram />
                                        </el-icon>
                                        <router-link to="/personal/buybook">我买到的书</router-link>
                                    </el-menu-item>
                                    <el-menu-item-group>
                                        <template #title>_________________</template>
                                        <el-menu-item index="1-5">
                                            <el-icon>
                                                <Lollipop />
                                            </el-icon>
                                            <router-link to="/personal/Auction">我的竞拍</router-link>
                                        </el-menu-item>
                                        <el-menu-item index="1-6">
                                            <el-icon>
                                                <ScaleToOriginal />
                                            </el-icon>
                                            <router-link to="/personal/transaction">我的拍卖交易</router-link>
                                        </el-menu-item>
                                        <el-menu-item index="1-7">
                                            <el-icon>
                                                <StarFilled />
                                            </el-icon>
                                            <router-link to="/personal/Lot">我收藏的拍卖品</router-link>
                                        </el-menu-item>
                                    </el-menu-item-group>
                                    <el-menu-item-group>
                                        <template #title>___________________</template>
                                        <el-menu-item index="1-8">
                                            <el-icon>
                                                <Reading />
                                            </el-icon>
                                            <router-link to="/personal/subscribe">我的订阅</router-link>
                                        </el-menu-item>
                                        <el-menu-item index="1-9">
                                            <el-icon>
                                                <HomeFilled />
                                            </el-icon>
                                            <router-link to="/personal/shop">我收藏的店铺</router-link>
                                        </el-menu-item>
                                        <el-menu-item index="1-10">
                                            <el-icon>
                                                <LocationInformation />
                                            </el-icon>
                                            <router-link to="/personal/address">我的收货地址</router-link>
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon>账号安全管理
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1">
                                        <router-link to="/personal/personalData">个人资料</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-2">
                                        <router-link to="/personal/coupon">我的优惠券</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-3">
                                        <router-link to="/personal/setPswd">设置登陆密码</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-4">
                                        <router-link to="/personal/boundPhone">修改绑定手机</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-5">
                                        <router-link to="/personal/mailbox">绑定邮箱</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-6">
                                        <router-link to="">实名认证</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-7">
                                        <router-link to="">交易提醒设置</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-8">
                                        <router-link to="">我的好友</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="2-9">
                                        <router-link to="">消息黑名单</router-link>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon>信誉档案
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1">
                                        <router-link to="">我的信誉</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="3-2">
                                        <router-link to="">店铺投诉</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="3-3">
                                        <router-link to="">拍卖投诉</router-link>
                                    </el-menu-item>
                                    <el-menu-item index="3-4">
                                        <router-link to="">违规信息</router-link>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon>
                                        <message />
                                    </el-icon>客户服务
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1">
                                        <router-link to="">客户消息</router-link>
                                    </el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>
            </el-container>
        </div>
        <div class="right">
            <router-view />
            <!-- <PersonalHomepage v-if="display" /> -->
        </div>
    </div>
</template>
<script lang="ts">
import PersonalHomepage from '@/views/PersonalHomepage.vue';
import { defineComponent } from 'vue';
export default defineComponent({ 
    data(){
        return{
            display:true
        }
    },
    methods:{
        btn(){
            this.display=false
        }

    },
    components: { PersonalHomepage },
    

}) 
</script>

<style lang="scss">
a {
    text-decoration: none;
    color: #303133;
}

.router-link-active {
    text-decoration: none;
    color: #303133;
}

.personMiddle {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    width: 1000px;
    margin: auto;
    margin-bottom: 10px;

    .right {
        width: 780px;
        // background-color: beige;
    }

    li {
        list-style: none;
    }
}

.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-sub-menu__title {
    font-size: 16px;
    font-weight: bold;
    height: 33px;
    line-height: 33px;
    color: #fff;
    text-shadow: 1px -1px 1px #900;
    background-color: #c63b40;
    margin-bottom: 5px;
}

.layout-container-demo .el-menu-item {
    height: 30px;
    line-height: 30px;
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    // background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>